<template>
  <section class="wrap">
    <!--标题-->
    <section class="header-title">
      <header-title>
        城管综合监管系统
      </header-title>
    </section>

    <!--tab切换-->
    <section class="header-tabs">
      <header-tab @change="headerTabClick"></header-tab>
    </section>

    <!--主体内容-->
    <section class="container">
      <section class="base-map-wrap">
        <base-map ref="map"
                  @circleMarkerClick="handleCircleMarkerClick"
                  @iconMarkerClick="handleIconMarkerClick"
                  @ggtccHtmlMarkerClick="handleCircleMarkerClick"></base-map>
      </section>

      <!--左侧-->
      <transition mode="out-in" name='slide-fade-left'>

        <!--环卫-->
        <section v-if="headerTabCurrent.code === 'hw'" key="hw-left">
          <section class="body-left">
            <section style="width: 100%;height: 100%;">
              <img src="../assets/image/hw/hw_left.png">
            </section>
            <section @click="hwClick(4)"
                     style="width: 1.3rem; height: 0.5rem; position:absolute; left: .3rem;top: .4rem;cursor: pointer"></section>
            <section @click="hwClick(1)"
                     style="width: 1.3rem; height: 0.5rem; position:absolute; left: 1.75rem;top: .4rem;cursor: pointer"></section>
            <section @click="hwClick(2)"
                     style="width: 1.3rem; height: 0.5rem; position:absolute; left: 3.25rem;top: .4rem;cursor: pointer"></section>
            <section @click="hwClick(3)"
                     style="width: 1.38rem; height: 0.6rem; position:absolute;left: 3.26rem;top: .92rem;cursor: pointer"></section>
          </section>
        </section>

        <!--渣土左侧-->
        <section v-if="headerTabCurrent.code === 'zt'" key="zt-left">
          <section class="body-left">
            <!-- <section style="width: 100%;height: 100%;"> -->

              <small-title title="基本信息"></small-title>
              <section style="margin: .2rem 0;height: 1.3rem;" v-loading="ztBaseInfoLoading">
                <section class="zt-info-row">
                  <section class="zt-info-wrap zt-info-wrap1"
                           v-for="item in ztBaseInfoData">
                    <section class="label">
                      {{item.value || '-'}}
                      <span class="unit">
                        {{item.unit}}
                      </span>
                    </section>
                    <section style="color: rgba(255, 255, 255, 0.6);">
                      {{item.label || '-'}}
                    </section>
                  </section>
                </section>
              </section>

              <small-title title="报警数量统计"></small-title>
              <section style="width: 100%;height: calc(100% - 6.2rem)" v-loading="ztBjLoading">
                <bar-chart :data="ztBjData"></bar-chart>
              </section>

              <small-title title="事件动态"></small-title>
              <section style="width: 100%;height: calc(100% - 5.8rem);" v-loading="sjdtLoading">
                <doughnut-chart :data="sjdtData"></doughnut-chart>
              </section>

            <!-- </section> -->
          </section>
        </section>

        <!-- 路灯 -->
        <section v-if="headerTabCurrent.code === 'ld'" key="ld-left">
          <!--<transition name="fade">-->
          <section class="body-left">
            <section style="width: 100%;height: 100%;">
              <small-title title="昨日亮灯情况"></small-title>

              <section style="margin: .2rem 0;height: 1.3rem;">
                <section class="zt-info-row">
                  <section class="zt-info-wrap zt-info-wrap1" @click="handleLdShowAllKzx(item)"
                           v-for="item in ldBaseInfoData">
                    <section class="label">
                      {{item.value || '-'}}
                      <span class="unit">
                        {{item.unit}}
                      </span>
                    </section>
                    <section style="color: rgba(255, 255, 255, 0.6);">
                      {{item.label || '-'}}
                    </section>
                  </section>
                </section>
              </section>

              <small-title title="灯组查询"></small-title>
              <section style="width: 100%;height: 6.85rem;overflow: hidden overlay;">
                <section class="hw-ld-title">
                  <section style="width:10%">序号</section>
                  <section style="width:65%">路灯组名称</section>
                  <section style="width:20%">路灯数量</section>
                </section>
                <section class="ld-row" v-for="(item, index) in ldLeftBottomData" @click="ldLeftBottomClick(item.group_id)">
                  <section class="ld-row-index">{{index + 1}}</section>
                  <el-tooltip effect="dark" :content="item.group_name" placement="top">
                    <section class="ld-row-label text-ellipsis">
                      {{item.group_name}}
                    </section>
                  </el-tooltip>
                  <el-tooltip effect="dark" :content="item.total + ''" placement="top">
                    <section class="ld-row-value text-ellipsis">{{item.total}}</section>
                  </el-tooltip>

                </section>
              </section>

              <!--<img src="../assets/image/ld/ld_left.png">-->
            </section>
          </section>
          <!--</transition>-->
        </section>

        <!-- 公共自行车 -->
        <section v-if="headerTabCurrent.code === 'ggzxc'" key="ggzxc-left">
          <transition name="fade">
            <section class="body-left" v-if="aqShowPage1" key="ggzxc1-left">
              <section style="width: 100%;height: 100%;">
                <!--<img src="../assets/image/ggzxc/ggzxc_left.png">-->
              <small-title title="当前自行车状态"></small-title>
                <section style="margin: .2rem 0;height: 1.3rem;" v-loading="zxcBaseInfoLoading">
                  <section class="zt-info-row">
                    <section class="zt-info-wrap zt-info-wrap1"
                             v-for="item in zxcBaseInfoData">
                      <section class="label">
                        {{item.value || '-'}}
                        <span class="unit">
                      {{item.unit}}
                    </span>
                      </section>
                      <section style="color: rgba(255, 255, 255, 0.6);">
                        {{item.label || '-'}}
                      </section>
                    </section>
                  </section>
                </section>

                <small-title title="还车量TOP7站点情况"></small-title>
                <section style="width: 100%;height: calc(100% - 6.05rem);cursor: pointer;" @click="zxcBikeClick(1)" v-loading="zxcBikeHireLoading">
                  <accumulation-bar-chart :legend="zxcBikeHireLegend" :data="zxcBikeHireData"></accumulation-bar-chart>
                </section>

                <small-title title="租车量TOP7站点情况"></small-title>
                <section style="width: 100%;height: calc(100% - 6.05rem);cursor: pointer;" @click="zxcBikeClick(2)" v-loading="zxcBikeHireLoading">
                  <accumulation-bar-chart :legend="zxcBikeRentalLegend" :data="zxcBikeRentalData"></accumulation-bar-chart>
                </section>

              </section>
              <!-- <div @click="aqShowPage1 = !aqShowPage1" class="common_toggle_arraw" alt="" srcset=""></div> -->
              <!--<section @click="addGgzxcCircleMarkersClick()"-->
                       <!--style="width: 4.4rem; height: 2.4rem; position:absolute; left: 0rem;bottom: .24rem;cursor: pointer;"></section>-->
            </section>
          </transition>
        </section>

        <!-- 公共停车场 -->
        <section v-if="headerTabCurrent.code === 'ggtcc'" key="ggtcc-left">
          <transition name='fade'>
            <section class="body-left" id="ggtcc" key="ggtcc">
              <section style="width: 100%;height:100%;position: relative">
                <small-title title="路内停车场信息"></small-title>

                <section style="margin: .2rem 0;height: 1.3rem;">
                  <section class="zt-info-row">
                    <section class="zt-info-wrap zt-info-wrap1"
                             v-for="item in tccLnBaseInfoData">
                      <section class="label">
                        {{item.value || '-'}}
                        <span class="unit">
                        {{item.unit}}
                      </span>
                      </section>
                      <section style="color: rgba(255, 255, 255, 0.6);">
                        {{item.label || '-'}}
                      </section>
                    </section>
                  </section>
                </section>

                <small-title title="路内停车场停车情况"></small-title>
                <section style="width: 100%;height: calc(100% - 6rem)">
                  <bar-chart :data="leftChart1" :textLimit="4" :grid="ggtccGrid"></bar-chart>
                </section>

                <small-title title="路内停车场空余情况"></small-title>
                <section style="width: 100%;height: calc(100% - 6rem)">
                  <bar-chart :data="leftChart2" :textLimit="4" :grid="ggtccGrid"></bar-chart>
                </section>
                <!--<img src="../assets/image/ggtcc/left01.png">-->
                <!--<img src="../assets/image/ggtcc/left02.png">-->
                <!--<img src="../assets/image/ggtcc/left03.png">-->
                <!--<img src="../assets/image/ggtcc/left04.png">-->
                <!--<img src="../assets/image/ggtcc/left05.png">-->
                <!--<img src="../assets/image/ggtcc/left06.png">-->
                <!--<img src="../assets/image/ggtcc/left07.png">-->
                <!--<img src="../assets/image/ggtcc/left08.png">-->
              </section>
              <section @click="aqdsdddqClick(1)"
                       style="width: 1.0rem; height: 1.32rem; position:absolute; left: 0rem;top: .42rem;cursor: pointer;"></section>
            </section>
          </transition>
        </section>

        <!-- 执法 -->
        <section v-if="headerTabCurrent.code === 'zf'" key="zf-left">
          <transition name='fade'>
            <section class="body-left" id="ggtcc1" key="ggtcc1">
              <section style="height: 100%;width: 100%;position: relative">
                <img src="../assets/image/zf/zf_left.png">
              </section>
              <section style="height: 2.3rem;width: 100%;">
                <section @click="aqdsdddqClick()"
                         style="width:100%;height: 4.5rem;position: absolute;left: 0rem;top: 4.5rem;cursor: pointer;"></section>
              </section>
            </section>
          </transition>
        </section>
      </transition>

      <!-- 中间 -->
      <transition mode="out-in" name='fade'></transition>

      <!--右侧-->
      <transition mode="out-in" name='slide-fade-right'>
        <!--环卫-->
        <section v-if="headerTabCurrent.code === 'hw'" key="hw-right">
          <section class="body-right">
            <section style="width: 100%;height: 100%;">
              <small-title title="垃圾处置"></small-title>

              <section class="hw-small-title" @click="hwTitleClick('gdfsfdc')">光大焚烧发电厂</section>

              <section style="margin: .1rem 0;height: 0.7rem;">
                <section class="zt-info-row">
                  <section class="zt-info-wrap hw-info-wrap-33"
                           v-for="item in hwGdfsfdcData">
                    <section class="label">
                      {{item.value || '-'}}
                      <span class="unit">
                        {{item.unit}}
                      </span>
                    </section>
                    <section style="color: rgba(255, 255, 255, 0.6);">
                      {{item.label || '-'}}
                    </section>
                  </section>
                </section>
              </section>

              <section class="hw-small-title" @click="hwTitleClick('gdccljcl')">光大餐厨垃圾处理</section>

              <section style="margin: .1rem 0;height: 1.9rem;">
                <section class="zt-info-row">
                  <section class="zt-info-wrap hw-info-wrap-33"
                           v-for="item in hwGdccljclData">
                    <section class="label">
                      {{item.value || '-'}}
                      <span class="unit">
                        {{item.unit}}
                      </span>
                    </section>
                    <section style="color: rgba(255, 255, 255, 0.6);">
                      {{item.label || '-'}}
                    </section>
                  </section>
                </section>
              </section>

              <section class="hw-small-title" @click="hwTitleClick('xltmc')">小岭填埋场</section>

              <section style="display:flex;">
                <section style="width: 15%;">
                  <section class="hw-xl-left-title">废渣</section>
                  <section class="hw-xl-left-title">渗滤液</section>
                </section>
                <section style="width: 85%;">
                  <section class="zt-info-row">
                    <section class="zt-info-wrap hw-info-wrap-33"
                             v-for="item in hwXltmcFzData">
                      <section class="label">
                        {{item.value || '-'}}
                        <span class="unit">
                        {{item.unit}}
                      </span>
                      </section>
                      <section style="color: rgba(255, 255, 255, 0.6);">
                        {{item.label || '-'}}
                      </section>
                    </section>
                  </section>

                  <section class="zt-info-row">
                    <section class="zt-info-wrap hw-info-wrap-33"
                             v-for="item in hwXltmcSlyData">
                      <section class="label">
                        {{item.value || '-'}}
                        <span class="unit">
                        {{item.unit}}
                      </span>
                      </section>
                      <section style="color: rgba(255, 255, 255, 0.6);">
                        {{item.label || '-'}}
                      </section>
                    </section>
                  </section>
                </section>
              </section>

              <section class="hw-small-title" @click="hwTitleClick('yjswclzx')">有机生物处理中心</section>

              <section class="hw-yjswczzx-wrap">
                <section class="hw-yjswczzx-title">
                  <!--<section>近一周</section>-->
                  <section>区域</section>
                  <section>达标排放量(吨)</section>
                </section>
                <section class="hw-yjswczzx-content" v-if="hwYjswclzxDatas.length > 0">
                  <section class="hw-yjswczzx-row" v-for="item in hwYjswclzxDatas" v-if="item">
                    <section>{{item.qx || ''}}</section>
                    <section>{{item.dbpfl || ''}}</section>
                    <!--<section>3923</section>-->
                  </section>
                </section>
              </section>

              <!--<img src="../assets/image/hw/hw_right.png">-->
            </section>
          </section>
          <!--上部-->
          <!--<section class="body-top-hw">-->
            <!--<section style="width: 100%;height: 100%;">-->
              <!--<img src="../assets/image/hw/hw_top.png">-->
            <!--</section>-->
          <!--</section>-->
          <!--底部-->
          <!--<section class="body-bottom-hw">-->
            <!--<section style="width: 100%;height: 100%;">-->
              <!--<img src="../assets/image/hw/hw_bottom.png">-->
            <!--</section>-->
          <!--</section>-->
        </section>

        <!--渣土右侧-->
        <section v-if="headerTabCurrent.code === 'zt'" key="zt-right">
          <section class="body-right">
            <!-- <section style="width: 100%;height: 100%;"> -->

              <small-title title="渣土车基本信息"></small-title>
              <section style="margin: .2rem 0;height: .7rem;" v-loading="ztZtcBaseInfoLoading">
                <section class="zt-info-row">
                  <section class="zt-info-wrap zt-info-wrap2"
                           style="flex: 1; width: auto;cursor: pointer"
                           @click="handleGetCarByStatus(item.code)"
                           v-for="(item, index) in ztZtcBaseInfoData">
                    <section class="label">
                      {{item.value || '-'}}
                      <span class="unit">
                        {{item.unit}}
                      </span>
                    </section>
                    <section style="color: rgba(255, 255, 255, 0.6);">
                      {{item.label || '-'}}
                    </section>
                  </section>
                </section>
              </section>

              <small-title title="工地输出情况统计"></small-title>
              <section style="margin: .1rem 0;height: 4.25rem;overflow: hidden overlay;" v-loading="ztGdLoading">
                <section class="zt-info-row">
                  <section style="flex: 1;">
                    <section class="zt-section-title">近一周输出车次</section>
                  </section>
                </section>
                <section class="zt-info-row">
                  <section style="flex: 1;">
                    <section class="zt-section-value">{{ztGdData.total + '辆'}}</section>
                  </section>
                </section>
                <section>
                  <section class="zt-bar-row" v-for="item in ztGdData.data">
                    <el-tooltip effect="dark" :content="item.name" placement="top">
                      <section class="zt-bar-label text-ellipsis">
                        {{item.name}}
                      </section>
                    </el-tooltip>

                    <section class="zt-bar-bar">
                      <section class="zt-bar-inner" :style="{width: item.sumCount === 0 ? '0%' : ((item.sumCount / ztGdData.max) * 100) + '%'}"></section>
                    </section>
                    <el-tooltip effect="dark" :content="(item.sumCount || '0') + '辆'" placement="top">
                      <section class="zt-bar-value text-ellipsis">{{(item.sumCount || '0') + '辆'}}</section>
                    </el-tooltip>
                  </section>
                </section>
              </section>

              <small-title title="消纳场情况统计"></small-title>
              <section style="margin: .1rem 0;height: 2.6rem;overflow: hidden overlay;" v-loading="ztXncLoading">
                <section class="zt-info-row">
                  <section style="flex: 1;">
                    <section class="zt-section-title">日处理能力</section>
                  </section>
                </section>
                <section class="zt-info-row">
                  <section style="flex: 1;">
                    <section class="zt-section-value text-ellipsis">{{ztXncData.total + 'M³'}}</section>
                  </section>
                </section>
                <section>
                  <section class="zt-bar-row" v-for="item in ztXncData.data">
                    <el-tooltip effect="dark" :content="item.name" placement="top">
                      <section class="zt-bar-label text-ellipsis">
                          {{item.name}}
                      </section>
                    </el-tooltip>

                    <section class="zt-bar-bar">
                      <section class="zt-bar-inner" :style="{width: item.dayAbility === 0 ? '0%' : ((item.dayAbility / ztXncData.max) * 100) + '%'}"></section>
                    </section>
                    <el-tooltip effect="dark" :content="(item.dayAbility || '0') + 'M³'" placement="top">
                      <section class="zt-bar-value">{{(item.dayAbility || '0') + 'M³'}}</section>
                    </el-tooltip>
                  </section>
                </section>
              </section>
          </section>
        </section>

        <!-- 路灯 -->
        <section v-if="headerTabCurrent.code === 'ld'" key="ld-right">
          <!--<transition name="fade">-->
          <section class="body-right">
            <section style="width: 100%;height: 100%;">

              <small-title title="亮灯率趋势分析"></small-title>
              <section style="width: 100%;height: calc(100% - 5.7rem);">
                <line-area-chart :legend="['亮灯率(%)']" :data="ldlvData"></line-area-chart>
              </section>

              <small-title title="站点亮灯率情况"></small-title>
              <section style="width: 100%;height: 4.97rem;overflow: hidden overlay;">
                <section class="hw-ld-title">
                  <!--<section>近一周</section>-->
                  <section style="width:10%">序号</section>
                  <section style="width:65%">站点名称</section>
                  <section style="width:20%">亮灯率(%)</section>
                </section>
                <section class="ld-row" v-for="(item, index) in ldRightBottomData" @click="ldRightBottomClick(item)">
                  <section class="ld-row-index">{{index + 1}}</section>
                  <el-tooltip effect="dark" :content="item.station_name + ''" placement="top">
                    <section class="ld-row-label text-ellipsis">
                      {{item.station_name}}
                    </section>
                  </el-tooltip>
                  <el-tooltip effect="dark" :content="item.light_on_ratio + '%'" placement="top">
                    <section class="ld-row-value text-ellipsis">{{item.light_on_ratio + '%'}}</section>
                  </el-tooltip>

                </section>
              </section>
            </section>
          </section>
          <!--</transition>-->
        </section>

        <!-- 公共自行车 -->
        <section v-if="headerTabCurrent.code === 'ggzxc'" key="ggzxc-right">
          <transition name="fade">
            <section class="body-right" key="aq1-right">
              <section style="width: 100%;height: 100%;">
                <!--<img src="../assets/image/ggzxc/ggzxc_right.png">-->
                <small-title title="注册结算信息"></small-title>
                <section style="margin: .2rem 0;height: .7rem;">
                  <section class="zt-info-row">
                    <section class="zt-info-wrap zt-info-wrap2"
                             style="flex: 1; width: auto;"
                             v-for="item in zxcZcjyInfoData">
                      <section class="label">
                        {{item.value || '-'}}
                        <span class="unit">
                      {{item.unit}}
                    </span>
                      </section>
                      <section style="color: rgba(255, 255, 255, 0.6);">
                        {{item.label || '-'}}
                      </section>
                    </section>
                  </section>
                </section>

                <small-title title="租车时段统计"></small-title>
                <section style="width: 100%;height: calc(100% - 5.75rem);" v-loading="zxcRentalTimeLoading">
                  <line-chart :legend="['租车量']" :data="zxcRentalTimeData"></line-chart>
                </section>

                <small-title title="租车趋势分析">
                  <section style="position:absolute; right: .1rem; top: 0">
                    <cycle-tab :option="zxcZcOption" @click="zxcZcClick"></cycle-tab>
                  </section>
                </small-title>
                <section style="width: 100%;height: calc(100% - 5.7rem);" v-loading="zxcBikeHireAnalysisLoading">
                  <line-area-chart :legend="['租车量']" :data="zxcBikeHireAnalysisData"></line-area-chart>
                </section>
              </section>
            </section>
          </transition>
        </section>

        <!-- 公共停车场 -->
        <section v-if="headerTabCurrent.code === 'ggtcc'" key="ggtcc-right">
          <section class="body-right">
            <section style="width: 100%;height: 100%;">
              <small-title title="停车场信息"></small-title>

              <section style="margin: .2rem 0;height: 1.3rem;">
                <section class="zt-info-row">
                  <section class="zt-info-wrap zt-info-wrap1"
                           v-for="item in tccBaseInfoData">
                    <section class="label">
                      {{item.value || '-'}}
                      <span class="unit">
                        {{item.unit}}
                      </span>
                    </section>
                    <section style="color: rgba(255, 255, 255, 0.6);">
                      {{item.label || '-'}}
                    </section>
                  </section>
                </section>
              </section>

              <small-title title="停车场停车情况"></small-title>
              <section style="width: 100%;height: calc(100% - 6rem)">
                <bar-chart :data="rightChart1" :textLimit="4" :grid="ggtccGrid"></bar-chart>
              </section>
              <small-title title="停车场空余情况"></small-title>
              <section style="width: 100%;height: calc(100% - 6rem)">
                <bar-chart :data="rightChart2" :textLimit="4" :grid="ggtccGrid"></bar-chart>
              </section>
              <!--<img src="../assets/image/ggtcc/right01.png">-->
              <!--<img src="../assets/image/ggtcc/right02.png">-->
              <!--<img src="../assets/image/ggtcc/right03.png">-->
              <!--<img src="../assets/image/ggtcc/right04.png">-->
              <!--<img src="../assets/image/ggtcc/right05.png">-->
              <!--<img src="../assets/image/ggtcc/right06.png">-->
              <!--<img src="../assets/image/ggtcc/right07.png">-->
              <!--<img src="../assets/image/ggtcc/right08.png">-->
            </section>
          </section>
        </section>

        <!-- 执法 -->
        <section v-if="headerTabCurrent.code === 'zf'" key="zf-right">
          <section class="body-right">
            <section style="height: 100%;width: 100%;">
              <img src="../assets/image/zf/zf_right.png">
            </section>
          </section>
        </section>

      </transition>

      <transition name='fade'>
        <section class="gj-info-wrap" v-if="gjBaseInfoVisible" key="zzz">
          <base-info :data="currentMarker" @close="gjBaseInfoVisible = false"></base-info>
        </section>
        <section class="gj-info-wrap" v-if="gjTmcBaseInfoVisible" key="tmc">
          <tmc-base-info :data="currentMarker" @close="gjTmcBaseInfoVisible = false"></tmc-base-info>
        </section>
        <section class="gj-info-wrap" v-if="gjGcBaseInfoVisible" key="gc">
          <gc-base-info :data="currentMarker" @close="gjGcBaseInfoVisible = false"></gc-base-info>
        </section>
        <section class="gj-info-wrap" v-if="gjFlBaseInfoVisible" key="fl">
          <fl-base-info :data="currentMarker" @close="gjFlBaseInfoVisible = false"></fl-base-info>
        </section>
        <section class="gj-info-wrap" v-if="stationInfoVisible" key="station">
          <station-info :data="currentMarker" @close="stationInfoVisible = false"></station-info>
        </section>
        <section class="gj-info-wrap" v-if="parkInfoVisible" key="park">
          <park-info :data="currentMarker" @close="parkInfoVisible = false"></park-info>
        </section>
        <section class="gj-info-wrap" v-if="ldKzxInfoVisible" key="ldKzx">
          <ld-kzx-info :data="currentMarker" @close="ldKzxInfoVisible = false"></ld-kzx-info>
        </section>
        <section class="aq-yilao-info-wrap" v-if="aqYlBaseInfoVisible" key="yl">
          <yi-lao-info :data="currentMarker" @close="aqYlBaseInfoVisible = false"></yi-lao-info>
        </section>
        <section class="aq-yilao-info-wrap" style="height: 2.5rem" v-if="aqSpBaseInfoVisible" key="sp">
          <aq-video-info :data="currentMarker" @close="aqSpBaseInfoVisible = false"></aq-video-info>
        </section>
        <section class="yx-bus-info-wrap" v-if="ztCarInfoVisible" key="yx_bus_info">
          <bus-info :data="currentMarker" @close="ztCarInfoVisible = false"></bus-info>
        </section>

        <section class="hw-dialog" style="width: 5rem;" v-if="hwGdfsfdcVisible" key="hwGdfsfdc">
          <gdfdc-table @close="hwGdfsfdcVisible = false"></gdfdc-table>
        </section>
        <section class="hw-dialog" style="width: 5rem;" v-if="hwYjswclzxVisible" key="hwGdfsfdc">
          <yjswclzx-table @close="hwYjswclzxVisible = false"></yjswclzx-table>
        </section>
        <section class="hw-dialog" style="width: 10rem;" v-if="hwGdccljclVisible" key="hwGdccljcl">
          <gdccljcl-table @close="hwGdccljclVisible = false"></gdccljcl-table>
        </section>
        <section class="hw-dialog" style="width: 10rem;" v-if="hwXltmclVisible" key="hwGdccljcl">
          <xltmc-table @close="hwXltmclVisible = false"></xltmc-table>
        </section>
      </transition>
    </section>
  </section>
</template>

<script>
  import {ComponentsMixins} from './mixins/components'
  import {ZtMixins} from './mixins/zt'
  import {GgzxcMixins} from './mixins/ggzxc'
  import {GgtccMixins} from './mixins/ggtcc'
  import {LdMixins} from './mixins/ld'
  import {HwMixins} from './mixins/hw'

  export default {
    name: 'index',
    mixins: [ComponentsMixins, ZtMixins, GgzxcMixins, GgtccMixins, LdMixins, HwMixins],
    data() {
      return {
        headerTabCurrent: {label: '干净', code: 'gj'},
        currentHwType: 0,
        gjBaseInfoVisible: false,
        gjTmcBaseInfoVisible: false,
        gjGcBaseInfoVisible: false,
        gjFlBaseInfoVisible: false,
        aqYlBaseInfoVisible: false,
        aqSpBaseInfoVisible: false,
        // 渣土车详情面板
        ztCarInfoVisible: false,

        currentMarker: null,
        currentIconMarker: null,

        // 自行车
        stationInfoVisible: false,
        // 环卫
        hwGdfsfdcVisible: false,
        hwGdccljclVisible: false,
        hwYjswclzxVisible: false,
        hwXltmclVisible: false,
        aqShowPage1: true,
        hiddFlag: true,
        ztcAqOption: [
          {label: '月', code: 'month'},
          {label: '季', code: 'quarter'},
          {label: '年', code: 'year'}
        ]
      }
    },
    mounted() {
    },
    beforeDestroy() {
    },
    methods: {
      // 头部tab点击
      headerTabClick(tab) {
        this.headerTabCurrent = tab
        this.$refs.map.clearMarkers()
        this.initAllPage()
        if (this.headerTabCurrent.code === 'zt') {
          this.openZtPage()
        } else if (this.headerTabCurrent.code === 'ggzxc') {
          this.openGgzxcPage()
        } else if (this.headerTabCurrent.code === 'ggtcc') {
          this.openGgtccPage()
        } else if (this.headerTabCurrent.code === 'ld') {
          this.openLdPage()
        } else if (this.headerTabCurrent.code === 'hw') {
          this.openHwPage()
        }
      },
      initAllPage() {
        // 渣土车详情
        this.ztCarInfoVisible = false

        // 路灯控制箱详情
        this.ldKzxInfoVisible = false

        this.aqShowPage1 = true
        this.gjBaseInfoVisible = false
        this.gjTmcBaseInfoVisible = false
        this.gjGcBaseInfoVisible = false
        this.gjFlBaseInfoVisible = false
        this.aqYlBaseInfoVisible = false
        this.aqSpBaseInfoVisible = false
        this.stationInfoVisible = false
        this.parkInfoVisible = false
        this.hwGdfsfdcVisible = false
        this.hwGdccljclVisible = false
        this.hwYjswclzxVisible = false
        this.hwXltmclVisible = false
      },
      // 环卫设施点击
      hwClick(type) {
        // 如果有数据则清除
        if (this.currentHwType === type) {
          this.$refs.map.clearMarkers()
          this.currentHwType = 0
          return
        }
        this.currentHwType = type
        this.clearGjInfo()
        if (type === 1) {
          const data = require('../assets/json/hwZzzData')
          this.$refs.map.addCircleMarkers(data, 'zzz')
        } else if (type === 2) {
          const data = require('../assets/json/hwTmcData')
          this.$refs.map.addCircleMarkers(data, 'tmc')
        } else if (type === 3) {
          const data = require('../assets/json/hwGcData')
          this.$refs.map.addCircleMarkers(data, 'gc')
        } else if (type === 4) {
          const data = require('../assets/json/hwFlData')
          this.$refs.map.addCircleMarkers(data, 'fl')
        }
      },
      // 点点击事件
      handleCircleMarkerClick(e) {
        this.clearGjInfo()
        if (e.markerType === 'zzz') {
          this.currentMarker = e
          this.gjBaseInfoVisible = true
        } else if (e.markerType === 'tmc') {
          this.currentMarker = e
          this.gjTmcBaseInfoVisible = true
        } else if (e.markerType === 'gc') {
          this.currentMarker = e
          this.gjGcBaseInfoVisible = true
        } else if (e.markerType === 'fl') {
          this.currentMarker = e
          this.gjFlBaseInfoVisible = true
        } else if (e.markerType === 'zxcStations') {
          this.currentMarker = e
          this.stationInfoVisible = true
        } else if (e.markerType === 'ggtcc') {
          this.currentMarker = e
          this.parkInfoVisible = true
        } else if (e.markerType === 'ldKzx') {
          this.currentMarker = e
          this.ldKzxInfoVisible = true
        }
      },
      handleIconMarkerClick(e) {
        this.clearAqInfo()
        this.resetYXInfo()
        if (e.markerType === 'yilaodian') {
          this.currentMarker = e
          this.aqYlBaseInfoVisible = true
        } else if (e.markerType === 'video') {
          this.currentMarker = e
          this.aqSpBaseInfoVisible = true
        } else if (e.markerType === 'yx_bus_info') {
          this.currentMarker = e
          this.ztCarInfoVisible = true
        }
      },
      clearGjInfo() {
        this.gjBaseInfoVisible = false
        this.gjTmcBaseInfoVisible = false
        this.gjGcBaseInfoVisible = false
        this.gjFlBaseInfoVisible = false
      },
      clearAqInfo() {
        this.aqYlBaseInfoVisible = false
        this.aqSpBaseInfoVisible = false
      },

      resetYXInfo() {
        this.ztCarInfoVisible = false
      },

      // 有序页面内的初始化操作
      initYx() {
        this.ztCarInfoVisible = false
      },

      // =========== 群众满意 点击 开始 ===============
      qzmyClick(type) {
        if (type === 1) {
          this.hiddFlag = false
        } else if (type === 2) {
          this.hiddFlag = true
        } else if (type === 3) {
          this.$refs.map.clearMarkers()
          const data = require('../assets/json/qzmyGcwrm')
          const img = require('../assets/image/qzmy/zaoy.png')
          const data1 = require('../assets/json/qzmyGcwrmAll')
          const img1 = require('../assets/image/qzmy/zaoysheb.png')
          this.$refs.map.addIconMarkers(data, img, 'zaoyin', {size: [61, 95], offset: [-30, -82]}, true, true, false)
          this.$refs.map.addIconMarkers(data1, img1, 'zaoyin1', {size: [28, 30], offset: [-14, -15]}, true, true, false)
        } else if (type === 4) {
          this.$refs.map.clearMarkers()
          const data = require('../assets/json/qzmyHcstts')
          const img = require('../assets/image/qzmy/heichous.png')
          const data1 = require('../assets/json/qzmyHcsttsAll')
          const img1 = require('../assets/image/qzmy/water.png')
          this.$refs.map.addIconMarkers(data, img, 'heichous', {size: [61, 106], offset: [-30, -87]}, true, true, false)
          this.$refs.map.addIconMarkers(data1, img1, 'heichous', {
            size: [30, 30],
            offset: [-15, -15]
          }, true, true, false)
        }
      },
      // =========== 群众满意 点击 结束 ===============
      // 安全-易涝区点击
      yilaoClick() {
        this.$refs.map.clearMarkers()
        const data = require('../assets/json/aqYiLaoQu')
        const img = require('../assets/image/common/yilaodian-top.png')
        this.$refs.map.addIconMarkers(data, img, 'yilao', {
          size: [61, 103],
          offset: [-30, -87]
        }, true, true, false, true)

        const data2 = require('../assets/json/aqJsData')
        const img2 = require('../assets/image/aq/yilaodian.png')
        this.$refs.map.addIconMarkers(data2, img2, 'yilaodian', {
          size: [30, 30],
          offset: [-15, -15]
        }, true, true, false, false)

        const data3 = require('../assets/json/aqVideoData')
        const img3 = require('../assets/image/aq/shexiangtou.png')
        this.$refs.map.addIconMarkers(data3, img3, 'video', {
          size: [30, 30],
          offset: [-15, -15]
        }, true, true, false, false)
      },
      // 公共自行车点击事件
      addGgzxcCircleMarkersClick() {
        this.$refs.map.clearMarkers()
        const data = require('../assets/json/ggzxcCircleData')
        this.$refs.map.addCircleMarkers(data, 'ds', {
          clearFlag: false,
          fitViewFlag: true,
          clickFlag: true,
          radius: 7,
          fillOpacity: 1,
          fillColor: 'rgba(235,97,0,1)'
        }, 'rgba(235,0,0,1)')
        this.$refs.map.setCenter(118.295053, 33.941785)
      },
      // 安全 断水断电断气点击
      aqdsdddqClick() {
        this.$refs.map.clearMarkers()
        const data = require('../assets/json/aqdsdddqData')
        this.$refs.map.addCircleMarkers(data.filter(item => {
          return item.type === '1'
        }), 'ds', {
          clearFlag: false,
          fitViewFlag: true,
          clickFlag: true,
          radius: 7,
          fillOpacity: 1,
          fillColor: 'rgba(235,97,0,1)'
        }, 'rgba(235,0,0,1)')

        this.$refs.map.addCircleMarkers(data.filter(item => {
          return item.type === '2'
        }), 'dd', {
          clearFlag: false,
          fitViewFlag: true,
          clickFlag: true,
          radius: 7,
          fillOpacity: 1,
          fillColor: 'rgba(0,255,255,1)'
        }, 'rgba(235,0,0,1)')

        this.$refs.map.addCircleMarkers(data.filter(item => {
          return item.type === '3'
        }), 'dq', {
          clearFlag: false,
          fitViewFlag: true,
          clickFlag: true,
          radius: 7,
          fillOpacity: 1,
          fillColor: 'rgba(0,255,0,1)'
        }, 'rgba(235,0,0,1)')
      }
    }
  }
</script>

<style scoped>
  @import '~@/assets/style/zt.css';
  @import '~@/assets/style/ld.css';
  @import '~@/assets/style/hw.css';

  /deep/ .el-loading-mask {
    background-color: rgba(0, 0, 0, 0.7) !important;
  }

  img {
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  /*左侧过渡动画*/
  .slide-fade-left-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-left-leave-active {
    transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-left-enter, .slide-fade-left-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(-1rem);
    opacity: 0;
  }

  /*右侧过渡动画*/
  .slide-fade-right-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-right-leave-active {
    transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-right-enter, .slide-fade-right-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateX(1rem);
    opacity: 0;
  }

  /*下方过渡动画*/
  .slide-fade-bottom-enter-active {
    transition: all .3s ease;
  }

  .slide-fade-bottom-leave-active {
    transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }

  .slide-fade-bottom-enter, .slide-fade-bottom-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */
  {
    transform: translateY(1rem);
    opacity: 0;
  }

  .wrap {
    width: 100vw;
    height: 100vh;
    background: #091221;
    text-align: center;
    font-size: .16rem;
  }

  .container {
    width: 100%;
    height: 100%;
    position: relative;
    color: #FFF;
    overflow: hidden;
  }

  .base-map-wrap {
    width: 100%;
    height: 100vh;
    z-index: 0;
    position: absolute;
  }

  .header-title {
    width: 9.13rem;
    height: 0.58rem;
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 2;
    transform: translateX(-50%);
  }

  .header-tabs {
    position: absolute;
    left: 50%;
    top: .9rem;
    z-index: 2;
    transform: translateX(-50%);
  }

  .body-left {
    width: 4.8rem;
     height: 9.26rem;
    position: absolute;
    left: .24rem;
    top: 1.12rem;
    bottom: .24rem;
    background: rgba(2, 9, 21, 0.85);
  }

  .body-bottom {
    width: 8.7rem;
    height: 2.56rem;
    position: absolute;
    left: 50%;
    bottom: 0.2rem;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    /* border: 1px solid red; */
    align-items: center;
  }

  .body-top1 {
    position: absolute;
    /* border: 1px solid red; */
    top: 1.5rem;
    left: 28%;
  }

  .body-top2 {
    position: absolute;
    /* border: 1px solid red; */
    top: 1.5rem;
    left: 57%;
  }

  .yx-bottom-item {
    width: 4.2rem;
    background: rgba(2, 9, 21, 0.85);
  }

  .body-right {
    width: 4.8rem;
     height: 9.26rem;
    position: absolute;
    right: .24rem;
    top: 1.12rem;
    bottom: .24rem;
    background: rgba(2, 9, 21, 0.85);
  }

  .body-right-hw {
    width: 4.4rem;
    /* height: 6rem; */
    position: absolute;
    right: .24rem;
    top: 1.12rem;
    background: rgba(2, 9, 21, 0.85);
  }

  .body-bottom-hw {
    height: 2.26rem;
    position: absolute;
    left: 5.2rem;
    right: .24rem;
    bottom: .24rem;
    background: rgba(2, 9, 21, 0.85);
  }

  .body-top-hw {
    width: 4.26rem;
    height: 1.20rem;
    position: absolute;
    left: 5.6rem;
    top: 1.5rem;
    background: rgba(2, 9, 21, 0.85);
  }

  .gj-info-wrap {
    width: 3rem;
    max-height: 6.5rem;
    position: absolute;
    top: 1.87rem;
    right: 5.5rem;
    background: rgba(0, 0, 0, 1.2);
    border: 1px solid rgba(0, 255, 255, 0.32);
  }

  .aq-yilao-info-wrap {
    width: 3rem;
    height: 2.3rem;
    position: absolute;
    top: 1.87rem;
    right: 5.5rem;
    background: rgba(0, 0, 0, 1.2);
    border: 1px solid rgba(0, 255, 255, 0.32);
  }

  .yx-bus-info-wrap {
    width: 3rem;
    /* height: 6.5rem; */
    position: absolute;
    top: 1.87rem;
    right: 5.5rem;
    background: rgba(0, 0, 0, 1.2);
    border: 1px solid rgba(0, 255, 255, 0.32);
  }

  .yx-violation-top5-wrap {
    width: 3rem;
    /* height: 6.5rem; */
    position: absolute;
    top: 1.87rem;
    right: 5.5rem;
    background: rgba(0, 0, 0, 1.2);
    border: 1px solid rgba(0, 255, 255, 0.32);
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }

  /* ========== 有序 样式开始========== */
  .common_toggle_arraw {
    width: .38rem;
    height: .18rem;
    /* border: 1px solid red; */
    position: absolute;
    top: .14rem;
    right: .12rem;
    cursor: pointer;
    border: none;
  }

  .bus-indicator {
    width: 0.96rem;
    height: 0.82rem;
    position: absolute;
    top: 1.13rem;
    left: 5.15rem;
    cursor: pointer;
  }

  .bus-chose-btn {
    width: 100%;
    height: 45%;
    background: rgba(11, 103, 137, 0.5);
    border-bottom: .01rem solid transparent;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bus-chose-btn-active {
    background: rgba(11, 103, 137, 0.8);
    border-bottom: .01rem solid #1ff3ff;
  }

  /* ========== 有序 样式结束========== */

  .border_red {
    border: 1px solid red;
  }
</style>
